<template>
	<view class="dao_card" @tap="linkTo">
		<!-- 标题 -->
		<view class="title">
			<!-- 图标 -->
			<view class="title_logo">
				<image :src="item.logo ? item.logo : defaultLogo" mode=""></image>
			</view>
			<!-- 文字 -->
			<view class="title_text">
				{{item.daoName}}
			</view>
		</view>
		<!-- 描述 -->
		<view class="description">
			{{item.companyProfile}}
		</view>
		<!-- 其他 -->
		<view class="other">
			<!-- 社区类型 -->
			<view class="type">
				<view class="">社区类型:</view>
				<view class="tag">
					<u-tag text="dao" type="warning" plain plainFill size="mini"></u-tag>
				</view>
			</view>
			<view class="link">
				<view class="">官方链接:</view>
				<view class="tolink">
					<u-icon name="home-fill" size="20" class="icon"></u-icon>
					<u-icon name="weixin-fill" size="20" class="icon"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认logo
				defaultLogo: '../../static/img/logo.png'
			};
		},
		props: {
			item: {
				type: Object
			},
		},
		methods: {
			linkTo() {
				this.$emit("linkTo")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dao_card {
		box-shadow: 4px 4px 26px 6px rgba(0, 0, 0, 0.08);
		border-radius: 2rem;
		height: 400rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.title {
			display: flex;
			align-items: center;

			&_logo {
				width: 100rpx;
				height: 100rpx;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&_text {
				font-size: $echo-font-size-title;
			}
		}

		.description {
			margin: 20rpx 0 20rpx 0;

			height: 156rpx;
			font-size: $echo-font-size-conent;
			line-height: 40rpx;
			@include text-ellipsis(3);
		}

		.other {
			font-weight: 300;

			.type,
			.link {
				display: flex;
				align-items: center;
				font-size: 12px;
				.tag,
				.tolink {
					margin-left: 40rpx;
					display: flex;
				}

			}

			.link {
				margin-top: 10rpx;

				.icon {
					margin-right: 10rpx;
				}
			}

		}
	}
</style>
